<template>
  <div class="preview">
    <mu-carousel transition="fade" class="preview-list" :cycle="false">
      <mu-carousel-item 
        v-for="item,index in previewList" 
        :key="index"
        class="preview-item"
      >
        <img :src="item">
      </mu-carousel-item>
    </mu-carousel>
    <svg t="1615542838703" @click="changPreview" class="fork" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7714" width="45" height="45"><path d="M511.997954 1022.977242c-69.038236 0-136.025841-13.528025-199.10344-40.206677-60.911398-25.763283-115.608515-62.639859-162.57358-109.604924-46.964042-46.965064-83.840617-101.662182-109.603901-162.57358C14.036336 647.514461 0.509334 580.526856 0.509334 511.488621s13.527002-136.025841 40.206677-199.10344c25.763283-60.911398 62.639859-115.608515 109.604924-162.57358 46.964042-46.965064 101.662182-83.84164 162.57358-109.604924 63.0776-26.679675 130.065205-40.206677 199.10344-40.206677S648.023795 13.527002 711.101395 40.206677c60.911398 25.763283 115.608515 62.639859 162.57358 109.603901 46.965064 46.965064 83.84164 101.662182 109.604924 162.57358 26.679675 63.0776 40.206677 130.065205 40.206677 199.10344s-13.528025 136.025841-40.206677 199.10344c-25.763283 60.911398-62.639859 115.608515-109.604924 162.57358-46.965064 46.965064-101.662182 83.84164-162.57358 109.604924C648.023795 1009.449217 581.03619 1022.977242 511.997954 1022.977242zM511.997954 58.370866c-61.183451 0-120.520824 11.976501-176.364454 35.596082C281.679929 116.787756 233.218569 149.46284 191.595371 191.086038c-41.623197 41.623197-74.298282 90.084557-97.118067 144.03813-23.619582 55.84363-35.596082 115.181002-35.596082 176.364454s11.976501 120.520824 35.596082 176.364454c22.820808 53.95255 55.495892 102.414932 97.119089 144.03813 41.623197 41.622175 90.084557 74.298282 144.037107 97.118067 55.84363 23.619582 115.181002 35.597105 176.364454 35.597105 61.183451 0 120.520824-11.976501 176.364454-35.597105 53.95255-22.819785 102.414932-55.495892 144.03813-97.118067 41.622175-41.623197 74.298282-90.08558 97.118067-144.03813 23.619582-55.84363 35.597105-115.181002 35.597105-176.364454s-11.976501-120.520824-35.597105-176.364454c-22.819785-53.953572-55.495892-102.414932-97.118067-144.037107-41.623197-41.623197-90.08558-74.298282-144.03813-97.119089C632.518778 70.347366 573.181406 58.370866 511.997954 58.370866z" p-id="7715" fill="#ffffff"></path><path d="M556.654653 511.488621l201.181685-201.181685c12.311965-12.311965 12.311965-32.344733 0-44.656699-12.311965-12.311965-32.346779-12.310943-44.656699 0L511.997954 466.831922 310.816269 265.649214c-12.311965-12.310943-32.344733-12.310943-44.656699 0-12.311965 12.311965-12.311965 32.344733 0 44.657722L467.341256 511.488621 266.15957 712.671329c-5.942226 5.942226-9.215053 13.870649-9.215053 22.327838 0 8.456166 3.272827 16.385612 9.215053 22.327838 6.155983 6.155983 14.24191 9.233463 22.328861 9.233463s16.171855-3.078503 22.328861-9.233463l201.181685-201.181685 201.181685 201.181685c6.155983 6.155983 14.24191 9.233463 22.327838 9.233463 8.08695 0 16.172878-3.078503 22.328861-9.233463 12.311965-12.311965 12.311965-32.344733 0-44.655676L556.654653 511.488621z" p-id="7716" fill="#ffffff"></path></svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewList: [
        "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=496620333,2325269774&fm=11&gp=0.jpg",
        "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3401428319,3880891830&fm=11&gp=0.jpg",
        "https://muse-ui.org/img/carousel2.35ee0e24.jpg",
        "https://muse-ui.org/img/carousel4.2a7cbfca.jpg",
        "http://image.xuexiwangzhe.com/Fvs47K8d8dbE1CzIqYQdLnnLnw3f"
      ]
    }
  },
  created() {
    var body = document.getElementsByTagName("body")[0];
    body.style.overflow = "hidden";
    body.style.paddingRight = "17px";
  },
  methods: {
    changPreview() {
      this.$emit("previewImg");
    }
  },
  destroyed() {
    var body = document.getElementsByTagName("body")[0];
    body.style.overflow = "visible";
    body.style.paddingRight = "0px";
  }
}
</script>

<style lang="less" scoped>
  .preview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    background: rgba( 31, 36, 51, .9 );

    .fork {
      position: fixed;
      z-index: 1000;
      right: 43px;
      top: 43px;
      cursor: pointer;
    }
  }
  .preview-list {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100vh;

    /deep/ .mu-carousel-button__left,/deep/ .mu-carousel-button__right {
      position: fixed;
      top: 0;
      bottom: 0;
      width: 206px;
      height: 100vh;
      margin-top: 0;
      border-radius: 0;
      &.hover::before {
        display: none;
      }
    }

    /deep/ .mu-carousel-button__left {
      left: 0;
    }
    /deep/ .mu-carousel-button__right {
      right: 0;
    }
    /deep/ .mu-ripple-wrapper {
      display: none;
    }
  }
  .preview-item {
    padding: 0 206px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      min-width: auto;
      max-width: calc(100vw - 412px);
      max-height: 100vh;
      position: static;
      transform: none;
    }

  }
</style>